<template>
	<view class="add">
		<view class="cell">
			<view class="label">发票类型</view>
			<view class="btn_list">
				<button :class="info.invoiceTypeCode == 'GENERAL_VAT'?'checked':''"  @click="changeType('GENERAL_VAT')">纸质普票</button>
				<button :class="info.invoiceTypeCode == 'SPECIAL_VAT'?'checked':''"  @click="changeType('SPECIAL_VAT')">专用发票</button>
			</view>
		</view>
		
		<view class="cell" v-if="info.invoiceTypeCode !== 'SPECIAL_VAT'">
			<view class="label">抬头类型</view>
			<view class="btn_list">
				<button :class="info.invoiceTitleType == 1?'checked':''" @click="changeTitleType(1)">个人</button>
				<button :class="info.invoiceTitleType == 2?'checked':''" @click="changeTitleType(2)">单位</button>
			</view>
		</view>
		
		<view class="cell">
			<view class="label">发票抬头</view>
			<input type="text" placeholder="请输入发票抬头" v-model="info.invoiceTitle" />
		</view>
		<template v-if="info.invoiceTitleType != 1||info.invoiceTypeCode == 'SPECIAL_VAT'">
		<view class="cell">
			<view class="label">单位税号</view>
			<input type="text" placeholder="请输入单位税号" v-model="info.invoiceOrgnizationTaxNo" />
		</view>
		</template>
		<template v-if="info.invoiceTypeCode == 'GENERAL_VAT'&&info.invoiceTitleType == 2">
			<view class="cell">
				<view class="label">注册地址</view>
				<input type="text" placeholder="选填" v-model="info.invoiceOrgnizationAddress" />
			</view>
			<view class="cell">
				<view class="label">注册电话</view>
				<u--input type="number" border="none" placeholder="选填" v-model="info.invoiceOrgnizationPhone" />
			</view>
			<view class="cell">
				<view class="label">开户银行</view>
				<input type="text" placeholder="选填" v-model="info.invoiceBankName"/>
			</view>
			<view class="cell">
				<view class="label">银行账号</view>
				<input type="text" placeholder="选填" v-model="info.invoiceBankAcctNo"/>
			</view>
		</template>
		<template v-if="info.invoiceTypeCode == 'SPECIAL_VAT'">
			<view class="cell">
				<view class="label">注册地址</view>
				<input type="text" placeholder="必填" v-model="info.invoiceOrgnizationAddress" />
			</view>
			<view class="cell">
				<view class="label">注册电话</view>
				<input type="text" placeholder="必填" v-model="info.invoiceOrgnizationPhone" />
			</view>
			<view class="cell">
				<view class="label">开户银行</view>
				<input type="text" placeholder="必填" v-model="info.invoiceBankName"/>
			</view>
			<view class="cell">
				<view class="label">银行账号</view>
				<input type="text" placeholder="必填" v-model="info.invoiceBankAcctNo"/>
			</view>
			<!-- <view class="cell" style="margin-top: 20rpx;">
				<view class="label">
					<u-checkbox-group v-model="isKnow">
						<u-checkbox activeColor="#e5002d" shape="circle" :name="1"></u-checkbox>
					</u-checkbox-group>
					
				</view>
				<view>
					我已阅读并同意<text class="shu" @click="showAlert=true">《专用发票抬头确认书》</text>
				</view>
			</view> -->
		</template>
		
		
		<x-footer>
			<button @click="handleSubmit" class="btn_save x-btn">保存</button>
		</x-footer>		
	</view>
</template>

<script>
	import {addOrUpdate} from '@/api/invoice.js'
	import EventBusMacro from '@/plugins/EventBus/eventBusMacro.js'
	
	export default{
		data(){
			return{
				info:{
					invoiceTypeCode:'GENERAL_VAT',
					invoiceTitleType:1,
				},
				// showAlert:false,
				// isKnow:[]
			}
		},
		onLoad(options) {
			if(options.info){
				this.info = JSON.parse(options.info)
			}
		},
		methods:{
			changeType(e){
				this.info.invoiceTypeCode = e;
				const info = new Object();
				info.invoiceTypeCode = this.info.invoiceTypeCode;
				info.invoiceTitleType = this.info.invoiceTitleType;
				// this.isKnow = []
				this.info = info;
			},
			changeTitleType(e){
				this.info.invoiceTitleType = e;
				const info = new Object();
				info.invoiceTypeCode = this.info.invoiceTypeCode;
				info.invoiceTitleType = this.info.invoiceTitleType;
				// this.isKnow = []
				this.info = info;
			},
			handleSubmit(){
				// console.log(1,this.isKnow[0])
				// if(this.info.invoiceTypeCode=='SPECIAL_VAT'&&this.isKnow[0] != 1){
				// 	uni.showToast({
				// 		title:'请先同意说明！',
				// 		icon:'none'
				// 	})
				// 	return false;
				// }
				addOrUpdate(this.info).then(res=>{
					uni.showToast({
						title:'保持成功'
					})
					setTimeout(()=>{
						this.$events.emit(EventBusMacro.EB_EDIT_INVOICE_INFO)
						uni.navigateBack();
					},500)
				}).catch(err=>{
					console.log(err)
				})
			},
		}
	}
</script>

<style scoped>
	.alert{
		padding: 40rpx 20rpx;
		position: relative;
	}
	.ic_close{
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
	
	.alert_title{
		padding: 0 20rpx;
	}
	
	.alert_text{
		color: #515151;
		font-size: 28rpx;
		margin: 40rpx auto;
		padding: 0 20rpx;
	}
	
	.shu{
		color: #e5002d;
	}
	.btn_save{
		width:710rpx;
		border: none;
		border-radius: 72rpx;
		height: 72rpx;
	}
	.add{
		padding-top: 20rpx;
		background-color: #f1f1f1;
		font-size: 30rpx;
		min-height: 100vh;
	}
	.cell{
		background: #fff;
		padding: 0 30rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #f1f1f1;
	}
	.cell>input{
		width: 70%;
	}
	.label{
		margin-right: 20rpx;
		color: #515151;
	}
	.btn_list{
		display: flex;
		align-items: center;
	}
	.btn_list>button{
		width: 160rpx;
		height: 60rpx;
		background-color: #f1f1f1;
		border-radius: 60rpx;
		line-height: 60rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
	}
	.checked{
		color: #e1251b;
		border: 2rpx solid #e1251b;
		background-color: rgba(225, 37, 27, 0.1) !important;
	}
	.footer {
		position: fixed;
		border-top: 1px solid #AAA;
		width:100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 8px;
		
	}
</style>